<template>
  <div class="designer-list">
    <div class="top">设计师入驻订单</div>
    <div class="bottom">
      <Input placeholder="请输入姓名或者联系方式" @search="handleSearch" />
      <div class="table-box mt">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="待处理" name="first" />
          <el-tab-pane label="缴费成功" name="second" />
          <el-tab-pane label="已退款" name="third" />
        </el-tabs>
        <el-table :data="tableData" style="width: 100%" :height="height">
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="phone" label="联系方式" />
          <el-table-column prop="company_name" label="所属公司" />
          <el-table-column prop="pay_at" label="缴费时间" />
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <div>
                <span v-if="activeName === 'first'" class="col-blue">待处理</span>
                <span v-if="activeName === 'second'" class="col-blue">缴费成功</span>
                <span v-if="activeName === 'third'" class="col-blue">已退款</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="page"
            :page-size="size"
            layout="total,prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog title="填写拒绝理由" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="拒绝理由:">
          <el-input v-model="form.mark" size="medium" type="textarea" style="width: 300px" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <Pagination class="pagination" /> -->
  </div>
</template>
<script>
import Input from '@/common/input'
// import Pagination from '@/common/pagination'
import Resize from '@/common/mixins/resize'
import { getDesignerOrder } from '@/api/http/designer'

export default {
  components: {
    Input
    // Pagination
  },
  mixins: [Resize],
  data() {
    return {
      dialogVisible: false,
      form: {
        mark: ''
      },
      page: 1,
      status: 0,
      size: 10,
      total: 0,
      defaultHeight: 320,
      activeName: 'first',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          circleUrl:
            'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
      ],
      query: ''
    }
  },
  created() {
    this.getDesignerOrder()
  },
  methods: {
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.page = val
      this.getDesignerOrder()
    },
    // 获取设计师入驻订单数据
    getDesignerOrder() {
      getDesignerOrder({
        page: this.page,
        status: this.status,
        keywords: this.query
      }).then(res => {
        // console.log(res, "---res");
        if (res.code == 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },
    handleSearch(query) {
      this.query = query
      this.getDesignerOrder()
    },
    handleClick(tab) {
      if (this.activeName == 'first') {
        this.status = 0
      } else if (this.activeName == 'second') {
        this.status = 1
      } else if (this.activeName == 'third') {
        this.status = 2
      }
      this.getDesignerOrder()
      console.log(this.activeName)
    },
    handleClose() {
      this.dialogVisible = false
    },
    refuseClick() {
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/color.scss";
@import "@/styles/el-pagination.scss";
@import "@/styles/el-button.scss";
.top {
  line-height: 44px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
.mt {
  margin-top: 20px;
}
.block {
  margin: 40px;
  text-align: center;
}
</style>
